<!-- PlantItem.vue -->

<template>
  <div class="plant-item" style="position: relative;overflow: hidden;">
    <el-image
      :src="getFullImagePath1(plant.photoId)"
      alt="Plant Image"
      @error="handleImageError"
      style="position: absolute;top: 50%;left: 50%; display: block; width: 100%;transform: translate(-50%, -50%);"
    :preview-src-list="getFullImagePath2(plant.photoId)"
    />
    <div class="plant-bottom">
      <p
        style="
          margin: 0;
          font-weight: bold;
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
          margin-top: 10px;
        "
      >
        {{ plant.chineseName }}
      </p>
      <p
        style="
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
          margin-top: 10px;
        "
      >
        {{ plant.scientificName }}
      </p>
    </div>
     <!-- New container for buttons in top-right -->
  <div class="plant-buttons" style="position: absolute; top: 10px; right: 10px; display: flex; align-items: center; gap: 10px; z-index: 2; background: rgba(255, 255, 255, 0.8); padding: 5px; border-radius: 5px;">
    <button  type="button" class="el-button el-button--text" @click="xiugai(plant.id)">
      <!---->
      <!---->
      <span>
        <i  class="el-icon-edit" style="font-size: 20px;"></i>
      </span>
    </button>
    <button  type="button" class="el-button el-button--text"  @click="deleteData(plant.id)">
      <!---->
      <!---->
      <span>
        <i  class="el-icon-delete" style="font-size: 20px;"></i> <!-- Removed margin-left -->
      </span>
    </button>
  </div>
  </div>
</template>

<script>
export default {
  props: {
    plant: {
      type: Object,
      required: true,
    },
  },
  data() {
    return {
      showDetailsFlag: false,
      showFullIntroduction: false,
      defaultImagePath: require("@/assets/404_images/zwtp.png"),
      dialog: false,
      loading: false,
      formLabelWidth: "200px",
      timer: null,
    };
  },
  methods: {
    xiugai(data) {
      this.$router.push({
        name: "AnimalEdit",
        query: { data: JSON.stringify(data) },
      });
    },
    getFullImagePath1(Path1) {
      // console.log("3e3", Path1);
      const baseURL = "http://49.232.236.127/wzimg/";
      // const add=[]
      // add.push(Path1)
      // console.log(add);
      // const additionalPaths = Path1.split(",").map((path) => baseURL + path);
      // const imagePath = Path1 ? baseURL + Path1 : this.defaultImagePath;
      return Path1 ? baseURL + Path1.split(",")[0] : this.defaultImagePath;
    },
    getFullImagePath2(Path2) {
      const baseURL = "http://49.232.236.127/wzimg/";
      const pathsArray = [];

      if (Path2 && Path2.length > 0) {
        const additionalPaths = Path2.split(",").map(
          (path) => baseURL + path.trim()
        ); // 使用 trim() 移除可能存在的空格
        pathsArray.push(...additionalPaths);
      }
      if (pathsArray.length === 0) {
        pathsArray.push(this.defaultImagePath);
      }
      return pathsArray;
    },
    handleImageError(event) {
      // 处理图片加载失败的情况
      event.target.src = this.defaultImagePath;
    },

    deleteData(id) {
      let that=this;
      this.$confirm("确定要删除这条动物数据吗？", "删除确认", {
        confirmButtonText: "确定删除",
        cancelButtonText: "取消",
        type: "warning",
        confirmButtonClass: "el-button--danger",
        cancelButtonClass: "el-button--default",
        center: true,
        customClass: "custom-confirm-dialog",
      })
        .then(() => {
          this.$api
            .delAnimalData(id)
            .then((res) => {
              // 在删除成功后触发事件通知父组件（PlantDisplay.vue）
             // this.$emit("plantDeleted", id);

              // 使用更美观的成功提示
              this.$message({
                type: "success",
                message: "数据删除成功！",
                duration: 3000,
                showClose: true,
                customClass: "custom-message-success",
              });
              //更新数据
              that.$parent.handlezwk({
              pageNum: 1,
              pageSize: 10,
            });
            })
            .catch((err) => {
              console.log(err);
              // 添加失败提示
              this.$message({
                type: "error",
                message: "删除失败，请重试",
                duration: 3000,
                showClose: true,
              });
            });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
            duration: 2000,
            showClose: true,
          });
        });
    },
  },
};
</script>

<style scoped>
.plant-item {
  border: 1px solid blue;
  margin: 10px;
  text-align: center;
  /* cursor: pointer; */
  width: 200px;
  /* width: 25%; */
  height: 260px;
}
.plant-bottom { position: absolute; bottom: 0; left: 0; right: 0; background: rgba(0, 0, 0, 0.7); color: white; z-index: 1; }

.plant-buttons {
  position: absolute;
  top: 10px;
  right: 10px;
  display: flex;
  align-items: center;
  gap: 10px;
  z-index: 2;
  background: rgba(255, 255, 255, 0.8);
  padding: 5px;
  border-radius: 5px;
}
.el-button {
  padding:0px;
}
.el-image-viewer__mask{
      opacity: .9;
}
.demo-drawer__content {
  overflow-y: auto; /* 添加垂直滚动条 */
  max-height: 90vh; /* 设置最大高度，根据实际情况调整 */
}

.custom-carousel .el-carousel__arrow {
  color: #0000ff; /* 设置箭头颜色为蓝色 */
}

.custom-carousel .el-carousel__indicator {
  background-color: #0000ff; /* 设置指示器颜色为蓝色 */
}

.el-descriptions__item {
  font-weight: bold;
}

/* 自定义确认对话框样式 */
.custom-confirm-dialog {
  border-radius: 8px;
}

.custom-confirm-dialog .el-message-box__header {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  border-radius: 8px 8px 0 0;
}

.custom-confirm-dialog .el-message-box__title {
  color: white;
  font-weight: bold;
}

.custom-confirm-dialog .el-message-box__content {
  padding: 20px;
  font-size: 16px;
  color: #333;
}

.custom-confirm-dialog .el-button--danger {
  background: linear-gradient(135deg, #ff6b6b 0%, #ee5a52 100%);
  border: none;
  border-radius: 6px;
  font-weight: bold;
  transition: all 0.3s ease;
}

.custom-confirm-dialog .el-button--danger:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(255, 107, 107, 0.4);
}

.custom-confirm-dialog .el-button--default {
  background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
  border: 1px solid #dee2e6;
  border-radius: 6px;
  font-weight: bold;
  transition: all 0.3s ease;
}

.custom-confirm-dialog .el-button--default:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

/* 自定义成功消息样式 */
.custom-message-success {
  background: linear-gradient(135deg, #4caf50 0%, #45a049 100%) !important;
  border: none !important;
  border-radius: 8px !important;
  box-shadow: 0 4px 12px rgba(76, 175, 80, 0.3) !important;
}

.custom-message-success .el-message__content {
  color: white !important;
  font-weight: bold !important;
}

.custom-message-success .el-message__icon {
  color: white !important;
}

</style>
